/*
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
*/

:host {
  background: var(--color-white);
  border-radius: 4px;
  box-shadow: 0 4px 8px -2px rgba(23, 28, 36, 0.25),
    0 0 1px rgba(23, 28, 36, 0.31);
  container-type: inline-size;
  display: block;
  padding: var(--spacing-16);
}

.title {
  background-color: var(--color-warning20);
  border: 1px solid var(--color-warning30);
  border-radius: 4px;
  color: var(--color-warning80);
  display: flex;
  font-weight: var(--font-weight-medium);
  margin-block-end: var(--spacing-16);
  padding: var(--spacing-8);

  & tui-svg {
    margin-block-start: 2px;
  }
}

.copy-title {
  color: var(--color-gray100);
  font-weight: var(--font-weight-medium);
  margin-block-end: var(--spacing-8);
}

.alert-icon {
  block-size: 13px;
  color: var(--color-warning50);
}

@container (inline-size > 350px) {
  .description {
    padding-inline-start: var(--spacing-32);
  }
}

.copy-description,
.description {
  color: var(--color-gray80);
  margin-block-end: var(--spacing-8);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;

  & button {
    margin-block-start: var(--spacing-8);

    &:last-child {
      margin-inline-start: var(--spacing-16);
    }
  }
}

.copy-link {
  &.copied {
    &::ng-deep [tuiWrapper] {
      background-color: var(--color-ok10);
      color: var(--color-ok80);
    }

    &::ng-deep tui-svg {
      color: var(--color-ok60);
    }
  }
}
